<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>价格</th>
        <th>数量</th>
        <th>状态</th>
        <th>小计</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>纸</td>
        <td>5</td>
        <td>1</td>
        <td>已上架</td>
        <td>5</td>
      </tr>
    </tbody>
  </table>
  <p>总价： 20</p>
  <p>已上架总价：15</p>
  <script>
    // sale 属性的意思是是否上架，已上架就是true，未上架就是fasle
    // 表格里的有一列的内容根据sale字段来显示“已上架”或者“未上架”
    // 每一件商品的小计也再这一行最后一列显示出来
    // 表格打印完成以后再后面显示已上架的总价和所有商品的总价
    var list = [
      {
        id: 1,
        title: '纸',
        price: 5,
        num: 1,
        sale: true
      },
      {
        id: 2,
        title: '笔',
        price: 2,
        num: 3,
        sale: false
      },
      {
        id: 3,
        title: '墨水',
        price: 8,
        num: 2,
        sale: true
      }
    ]
  </script>
</body>
</html>